<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>主页</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
	<link href="css/Font-Awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="css/iconfont/iconfont.css" rel="stylesheet">
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		div.item img{
			width:100%;
		}

	</style>
	<script type="text/javascript">
        $(document).ready(function(){
            $.ajax({
                type: "GET",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                contentType: "application/json;charset=utf-8",
                url:"http://localhost:8080/Order/user/sellers", //提交的地址
                async: false,
                error: function(request) {
                    alert("Connection error");
                },
                success: function(data) {
                    var html = '';
                    if(data.sellers.length > 0){
                        for(var i = 0;i < data.sellers.length;i++){
                            html +=
                                '<div class="clearfix ptb10 borderbf2 ogood">' +
                                '<div class="col-xs-4 plr10">' +
                                '<img src="' + data.sellers[i].img + '" alt="" class="pull-left img-responsive">' +
                                '</div>' +
                                '<div class="col-xs-8 clearPadding" style="position:relative;">' +
                                '<div>' +
                                '<a href="index.html?sellerId=' +
								data.sellers[i].sellerId +
								'"><h2 class="font20 mt0">' +
                                data.sellers[i].name +
                                '</h2></a>' +
                                '<div class="text-muted font10"> 月售   ' +
                                data.sellers[i].sales +
                                '</div>' +
                                '<div class="text-muted font10">   ' +
                                data.sellers[i].promotion +
                                '</div>' +
                                '</div></div></div>'
                        }
                        document.getElementById("product").innerHTML = html
                    }

                    //接收后台返回的结果
                }
            });
        });
	</script>
</head>
<body>
<!--图片轮播-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<!-- Indicators -->
	<ol class="carousel-indicators">
		<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-example-generic" data-slide-to="1"></li>
		<li data-target="#carousel-example-generic" data-slide-to="2"></li>

	</ol>

	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<img src="images/food1.jpg" >
			<div class="carousel-caption">
				LOL1
			</div>
		</div>
		<div class="item">
			<img src="images/food2.jpg" >
			<div class="carousel-caption">
				LOL2
			</div>
		</div>
		<div class="item">
			<img src="images/food3.jpg" >
			<div class="carousel-caption">
				LOL3
			</div>
		</div>



	</div>

</div>
<!--图片轮播-->
<div class="container">
	<div class="row">
		<div class="tabwrap clearfix">

			<div class="tabcontent clearfix">
				<HR>
				<div class="col-xs-12 clearPadding bg-white pull-right" id="product">


				</div>
			</div>
			<!--底部滑出 订单详情-->

			<!--店铺信息-->

		</div>
	</div>
</div>
<div class="maskbox"></div>

<script>
    $('.tabnav div.col-xs-4').click(function(){
        var index=$(this).index();
        console.log(index);
        $(this).addClass("borderb2").siblings().removeClass('borderb2');
        $('#tabwrap .tabcontent').eq(index).show();
        $('#tabwrap .tabcontent').eq(index).siblings().hide();
    });
    function setTotal(){
        var allprice=0;
        var allnum=0;
        $("#product .ogood").each(function(){
            var num=parseInt($(this).find('input[name=onum]').val());
            var price=$(this).find('[unitprice]').text();
            allprice+=num*price;
            allnum+=num;
        });
        $("#allprice").html(allprice.toFixed(2));
        $("#allnum").html(allnum);
    }
    function cartProduct(id,name,sellprice,onum){
        var one_price=onum*parseFloat(sellprice);
        one_price=one_price.toFixed(2);
        if($('[productid='+id+']').length>0){
            $('[productid='+id+'] .numbox').html(onum);
            $('[productid='+id+'] .pricebox span').html(one_price);
        }else{
            $('.orderdetail').append('<div class="clearfix borderbottom ptb10 plr15 cartgoods" productid="'+id+'" >\
      <div class="col-xs-7 clearPadding">'+name+'</div>\
      <div class="col-xs-5 clearPadding text-right">\
        <div class="pmbox plus pull-right" onclick="plus(this,'+sellprice+')"><i class="icon iconfont text-dining" style="font-size:24px;">&#xe605;</i></div>\
        <div class="numbox Padding5 pull-right">'+onum+'</div>\
        <div class="pmbox minu pull-right"><i class="icon iconfont text-dining" style="font-size:24px;position:relative;top:-2px;">&#xe608;</i></div>\
        <div class="pricebox pull-right mr15 lh24 text-dining">￥<span>'+one_price+'</span></div>\
      </div>\
    </div>');
        }
    }
    function plus(tag,id,name,sellprice,stock){
        var _this=$(tag);
        var input=$(tag).prev();
        var onum=parseInt(input.val());
        onum++;
        if(onum>stock){
            return alert('购买数量不能大于库存');
        }else{
            input.val(onum);
            setTotal();
            cartProduct(id,name,sellprice,onum);
        }
    }
    function min(tag,id,name,sellprice,stock){
        var input=$(tag).next();
        var onum=parseInt(input.val());
        onum--;
        if(onum<1){
            input.val(0);
            setTotal();
            cartProduct(id,name,sellprice,onum);
        }else{
            input.val(onum);
            setTotal();
            cartProduct(id,name,sellprice,onum);
        }
    }
    //点击购物车订单详情出现和隐藏
    $('.maskbox').height($(document).height());
    $(".orderdetail").hide();
    $(".ocartbox,.maskbox").click(function(){
        $(".maskbox").fadeToggle(300);
        $(".orderdetail").slideToggle(300);
    });
</script>
<script src="js/zepto.js"></script>
<script>
    $('.sortlist li').on('tap',function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
    var cate=document.getElementById('cate');
    var cateH=cate.offsetHeight;
    var headerH=document.getElementById("header").offsetHeight;//头的高
    var footerH=document.getElementById('footer').offsetHeight;//尾的高
    var showH=$(window).height()-headerH-footerH;
    var startX_cate,startY_cate,x_cate,y_cate,aboveY_cate=0;
    //触摸
    function touchSatrt_cate(e){
        e.preventDefault();
        var touch=e.touches[0];
        startY_cate = touch.pageY;   //刚触摸时的坐标 
    }
    //滑动
    function touchMove_cate(e){
        e.preventDefault();
        var  touch = e.touches[0];
        y_cate = touch.pageY - startY_cate;//滑动的距离
        //cate.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式     
        cate.style.top=aboveY_cate+y_cate+"px"; //这一句中的                          
    }
    //手指离开屏幕
    function touchEnd_cate(e){
        e.preventDefault();
        aboveY_cate=parseInt(cate.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;
        if(aboveY_cate>0){        //滑动的距离大于0，即向下滑动
            aboveY_cate=0;
            cate.style.top=headerH+'px';
        }else if(Math.abs(aboveY_cate)+showH>cateH){      //滑动距离太大,向上滑动

            if( cateH<=showH ){   //分类的高度小于屏幕
                cate.style.top=headerH+'px';
                aboveY_cate=0;
            }else{
                cate.style.top=-cateH+showH+'px';
                aboveY_cate=parseInt(cate.style.top);
            }
        }
    }
    //分类滑动
    cate.addEventListener('touchstart',touchSatrt_cate);
    cate.addEventListener('touchmove',touchMove_cate);
    cate.addEventListener('touchend',touchEnd_cate);
</script>
</body>
</html>